<template>
  <div id="discussion-card" style="width:100%; margin-top: 30px;" >
    
    <Button style="float: right;margin-bottom: 30px;"
      @click="createDiscussion()"><Icon type="plus"></Icon> {{$t('m.Write')}}
    </Button>
    

    <p id="no-discussion" v-if="discussions.length == 0">{{$t('m.No_discussion')}}</p>
    <ol id="discussion-list">
      <li v-for="discussion in discussions" :key="discussion.title">
        <Row type="flex" justify="space-between" >
          <Col :span="24" class="discussion-main">
            <p class="title">
              <a class="entry" @click.stop="goDiscussion(discussion)"> {{discussion.discussion_title}} </a>
              <Button size="small" shape="circle">
                {{displayType[discussion.discussion_type]}}
              </Button>
              <Button v-if="discussion.is_top" 
                  style="background-color:#bb4a; color:#fff" size="small" shape="circle">{{$t('m.Is_Top')}}</Button>

              <Button v-if="discussion.closed" 
                  style="background-color:#f066; color:#fff" size="small" shape="circle">{{$t('m.Is_Closed')}}</Button>
            </p>
            <ul style="font-size: 16px;margin-bottom: 0px; " >        
              <li> <i class="el-icon-view"></i> {{discussion.view_number }} </li>
              <li> <i class="el-icon-chat-line-square"></i> {{discussion.reply_number }} </li>
              <li> <i class="el-icon-caret-top"></i> {{discussion.like_number }} </li>
              <span v-if="isAdmin">
                <li> <a @click="changeTop(discussion.id)">{{$t('m.Is_Top')}}</a> </li>
                <li> <a @click="changeClose(discussion.id)">{{$t('m.Is_Closed')}}</a> </li>
              </span>
              <li style="float: right;">
              <a @click="goUser(discussion.created_by.username)" style="font-size:20px">{{discussion.created_by.username}}</a>
                创建于  {{discussion.last_edit_time | localtime('YYYY-M-D HH:mm') }}
            </li>
            </ul>
          </Col>
        </Row>
      </li>
    </ol>
    <div style="display: flex;justify-content: center;margin-top: 30px;">
      <Pagination 
        :total="total" 
        :pageSize="limit"
        @on-change="getDiscussionList" 
        :current.sync="page">
      </Pagination>
    </div>

  </div>

</template>
<script>
  import api from '@oj/api'
  import apiAdmin from '@admin/api'
  import { mapGetters } from 'vuex'
  import utils from '@/utils/utils'
  import { USER_TYPE } from '@/utils/constants'
  import Pagination from '@/pages/oj/components/Pagination'
  import Simditor from '@admin/components/Simditor.vue'
  import time from '@/utils/time'
  const limit = 25
  export default {
    name: 'discussion-list',
    props: {
      problemID: {
        type: String,
        required: true
      },
      problemid: {
        type: Number,
        required: true
      }
    },
    components: {
      Pagination,
      Simditor
    },
    data () {
      return {
        page: 1,
        query: {
          problem_id: ''
        },
        limit: limit,
        total: 0,
        rows: '',
        title: this.$i18n.t('m.All_Discussion'),
        discussions: [],
        creating: false,
        currentDiscussion: {},
        discussion_type: '',
        problem: {},
        displayType: {'Solution': '题解', 'Share': '分享', 'Integrated': '问答', 'All': '全部'}
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        let route = this.$route.query
        // id 号，非显示名
        this.query.problem_id = this.problemID
        console.log('qqqq', this.query)
        this.page = parseInt(route.page) || 1
        this.getDiscussionList()
      },
      getDiscussionList (page = 1) {
        let offset = (page - 1) * this.limit
        api.getDiscussionList(offset, this.limit, this.query).then((res) => {
          this.discussions = res.data.data.results
          this.total = res.data.data.total
          this.problem = res.data.data.problem
          if (this.problem !== null) this.title = this.problem._id + ' ' + this.problem.title + this.$i18n.t('m.S_Discussion')
          else this.title = this.$i18n.t('m.All_Discussion')
        })
      },
      changeRoute () {
        let query = Object.assign({}, this.query)
        query.page = this.page
        this.$router.push({
          name: 'discussion-list',
          query: utils.filterEmptyValue(query)
        })
      },
      createDiscussion () {
        this.currentDiscussion = {}
        this.currentDiscussion.discussion_title = ''
        this.currentDiscussion.discussion_type = ''
        this.currentDiscussion.discussion_text = ''
        this.currentDiscussion.discussion_text = ''
        this.currentDiscussion.discussion_type = 'Solution'
        this.currentDiscussion.problem_id = this.query.problemid
        this.currentDiscussion.editing = true
        api['createDiscussion'](this.currentDiscussion).then((res) => {
          // this.init()
          const {href} = this.$router.resolve({
            name: 'discussion-edit',
            params: {discussionID: res.data.data.id, problem_id: this.query.problem_id}
          })
          window.open(href, '_blank')
          // this.$router.push({name: 'discussion-edit', params: {discussionID: res.data.data.id, problem_id: this.query.problem_id}})
        }).catch()
      },
      changeTop (discussionID) {
        let query = {}
        query.id = discussionID
        query.is_top = true
        apiAdmin['changeDiscussionTop'](query).then(res => {
          this.init()
        }).catch()
      },
      changeClose (discussionID) {
        let query = {}
        query.id = discussionID
        query.closed = true
        apiAdmin['changeDiscussionClose'](query).then(res => {
          this.init()
        }).catch()
      },
      goDiscussion (discussion) {
        const {href} = this.$router.resolve({
          name: 'discussion-details',
          params: {discussionID: discussion.id}
        })
        window.open(href, '_blank')
        // this.$router.push({name: 'discussion-details', params: {discussionID: discussion.id}})
      },
      goUser (username) {
        // this.$router.push({
        //   name: 'user-home-discussion',
        //   query: {username: username}
        // })
      },
      getDuration (startTime, endTime) {
        return time.duration(startTime, endTime)
      }
    },
    computed: {
      ...mapGetters(['user', 'theme']),
      isAdmin () {
        return this.user.admin_type === USER_TYPE.SUPER_ADMIN
      }
    },
    watch: {
      '$route' (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.init()
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  #discussion-card {
    #no-discussion {
      text-align: center;
      font-size: 16px;
      padding: 20px;
    }
    #discussion-list {
      > li {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 5px;
        padding-top: 5px;
        border-bottom: 1px solid rgba(187, 187, 187, 0.5);
        list-style: none;
        .trophy {
          height: 40px;
          margin-left: 10px;
          margin-right: -20px;
        }
        .discussion-main {
          // padding-bottom: -5px;
          .title {
            font-size: 20px;
            a.entry {
              color: #162735;
              &:hover {
                color: #2d8cf0;
                border-bottom: 1px solid #2d8cf0;
              }
            }
            a.entry-dark {
              color: #fff;
              &:hover {
                color: #2d8cf0;
                border-bottom: 1px solid #2d8cf0;
              }
            }
            a.entry-primary {
              color: #fff;
              &:hover {
                color: #2d8cf0;
                border-bottom: 1px solid #2d8cf0;
              }
            }
          }
          li {
            display: inline-block;
            padding: 10px 0 0 10px;
            &:first-child { 
              padding: 10px 0 0 0;
            }
          }
        }
      }
    }
  }
</style>